<template>
  <view class="course-item" :class="{column:props.isColumn}" @click="toDetailPage(props.item.courseId)">
    <view class="item-left">
      <image :src="props.item.mainImage" class="course-img" lazy-load mode=""></image>
      <view class="course-time">
        {{props.item.totalTime}}
      </view>
    </view>
    <view class="item-right">
      <view class="course-name">{{props.item.title}}</view>
      <view class="info">
        <view class="nickName iconfont icon-laoshi2">{{props.item.nickName}}</view>
        <view class="count">
          <view class="money" v-if="props.item.isFree">免费</view>
          <view class="money iconfont icon-moneybag" v-else>{{props.item.priceDiscount || props.item.priceOriginal}}
          </view>
          <view class="look iconfont icon-video">{{props.item.studyTotal}} 人在学</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {
    getCurrentInstance
  } from "vue";
  const props = defineProps({
    // 判断图片和文字是否纵向显示
    isColumn: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({
        courseId: 1,
        userId: null,
        nickName: "张三老师",
        userImage: null,
        title: "mybatis从入门到实战",
        totalTime: "23:25:36",
        studyTotal: 366,
        commentTotal: 853,
        mainImage: "https://tse1-mm.cn.bing.net/th/id/R-C.cdfc0a6a03fd1e6e36672304c97c2d9e?rik=Lv9rBUfYVEoicw&riu=http%3a%2f%2fassets.kgc.cn%2fupload%2ffile%2f20161121%2f1479730958391071.jpg&ehk=%2bHbngVQdswX5qcqwf8ITSlr46Yb3GkRC0vruohFxXN8%3d&risl=&pid=ImgRaw&r=0",
        priceOriginal: 687,
        priceDiscount: 487
      })
    }
  })
  const {
    proxy
  } = getCurrentInstance()
  // 图片点击跳转到详情页事件
  const toDetailPage = (id) => {
    proxy.navTo(`/pages/course/course-details?id=${id}`)
  }
</script>

<style lang="scss" scoped>
  .course-item {
    display: flex;
    // flex-direction: column;
    width: 100%;
    padding: 20rpx 0;

    .item-left {
      width: 290rpx;
      height: 160rpx;
      margin-right: 20rpx;
      position: relative;

      .course-img {
        width: 290rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }

      .course-time {
        position: absolute;
        bottom: 5rpx;
        right: 5rpx;
        font-size: 22rpx;
        color: #fff;
        background: rgba(51, 51, 51, 0.4);
        border-radius: 20rpx;
        padding: 0 8rpx;
      }
    }

    .item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 160rpx;
      padding-top: 5rpx;
      padding-left: 5rpx;

      .course-name {
        max-width: 290rpx;
        height: 70rpx;
        line-height: 35rpx;
        font-size: 28rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: normal;
      }

      .info {
        .nickName {
          font-size: 23rpx;
          color: #999;
        }

        .count {
          display: flex;
          align-items: center;

          .iconfont {
            font-size: 23rpx;
            color: #222222;
          }

          .money {
            color: $mxg-text-color-red;
            width: 130rpx;
            font-size: 28rpx;
          }
        }
      }
    }
  }
</style>
